Welkom op de pagina van Rccenter 007

Deftige memberpage maken m.b.v. html

Eerst en vooral, heb je nog geen clearance level van 2, kijk dan eerst hier voor meer uitleg. (Jouw clearance level is )

Inleiding
Tabellen
Lijsten
Syntaxis html
Tips

Inleiding

Wil je een deftige memberpagina maken, dan moet je eerst iets afweten van html.
Html vertelt aan de browser hoe een stuk tekst of een afbeelding moet getoond worden bij de eindgebruiker (=bezoeker van je pagina). Zo kun je tekst zetten in een lijst, tekstvak, quote, tabel, hyperlink,... Positionering wordt behandeld in het eerste deel van deze pagina, het tweede deel gaat over de opmaak van de tekst.

Hoe ziet html eruit?

Alles wat tussen < en > staat, ziet een browser als html en zal ook als dusdanig behandeld worden. dit noemt men tags Zo leest de browser <table> als het begin van een tabel. Het einde van de tabel wordt bereikt bij </table>. Een tag die geopend wordt, MOET altijd weer gesloten worden. Zet je bijvoorbeeld <i> (tag voor schuine tekst),dan moet je ook </i> zetten. Doe je dit niet, dan kun je geluk hebben, en staat de rest van de pagina schuingedrukt. Heb je geen geluk, dan kan het zijn dat de rest van de pagina verdwijnt.

Tags kunnen ook attributen hebben. Dit zijn deeltjes die meer informatie geven over hoe een element getoond moet worden. Een tag met attribuut ziet er zo uit: <tagnaam attribuut="waarde">; en wordt weer afgesloten met </tagnaam>

Positionering

In dit deel worden behandeld: tabellen, lijsten, quotes, tekstvakken. Na de uitleg over de tag, zie je links telkens een voorbeeld, rechts zie je de code die gebruikt werd voor het voorbeeld. Alles in DRUKLETTERS is tekst die getoond wordt.

Tabellen

Een tabel start je met deze tag: <table>. Om een rij in te voegen in de tabel zet je <tr>. Een cel doe je met deze tag: <td>. Een tabel met één rij en één kolom wordt dus: <table><tr><td>CELINHOUD</td></tr></table>

Om twee cellen naast elkaar samen te voegen, gebruik je het attribuut colspan: <td colspan="2"> Om twee cellen onder elkaar samen te voegen, gebruik je het attribuut rowspan: <td rowspan="2">

Attribuut:	Waarde(n)
width	Aantal pixels/% van parent element
height	Aantal pixels/% van parent element
border	Aantal pixels
collapse	collapse (Borders van cellen verenigen)

rij1+rij2, kolom1	rij1, kolom2	rij1, kolom3
rij1+rij2, kolom1	rij2, kolom2	rij2, kolom3
rij3, kolom1	rij3, kolom2+3

Lijsten

Er zijn drie soorten lijsten: Genummerde lijsten, lijsten met bolletjes en definitielijsten.

Genummerde lijsten: deze zet je tussen <ol> en </ol>
Ongenummerde lijsten: deze zet je tussen <ul> en </ul>
Definitielijsten: deze zet je tussen <dl> en </dl>

Om een lijstitem toe te voegen zet je <li> Lijstitem </li> voor genummerde en niet-genummerde lijsten.
Voor definitielijsten zet je <dt> Watjewildefiniëren </dt> De definitie zelf zet je erna tussen <dd> en </dd>

Je kunt ook lijsten in lijsten zetten. Hiernaast zie je de drie types toegepast. De definition list werkt atm niet. Maar daar zal ons aller Tim zsm voor zorgen :)

- Deze lijst
- is
- met
- bolletjes
- - En verder
  - uitgebreid
1. Deze
2. lijst
3. is
4. genummerd
AJAX

AJAX (Asynchronous Javascript And XML) is een term voor het ontwerp van interactieve webpagina's waarin asynchroon gevraagde gegevens worden opgehaald van de webserver.

AJAX

Ajax is een stad en gemeente in Ontario, aan de oever van het Ontariomeer.

Extraatje: met de code rechts kun je een venstertje toevoegen waarmee anderen een pm naar jou kunnen sturen. belangrijk is dat je HIER TEXTAREA TAG AFSLUITEN vervangt door </textarea>. VULHIERJENAAMIN vervang je door je eigen naam. Spaties in je naam hoef je niet te vervangen.

Handige links:

http://www.w3schools.com
http://www.w3schools.com

Wat zijn tags?
Tags zijn de codes die gebruikt worden in html. Je kan ze herkennen aan het begin en einde van de tag:< en >. Op een azertyklavier staan deze naast links van de w, op een qwerty weetik nie, mag je altijd pmen. Als je deze tekens wilt tonen als tekst, zal dat niet zomaar gaan. Hier zijn speciale codes voor: < en > worden respectievelijk < en >
Er zijn twee soorten tags namelijk container tags en standalone tags. Container tags worden voornamelijk gebruikt om stukken tekst aan te passen, en standalone tags om iets in te voegen.

Container tags
De naam container tag wordt gebruikt omdat een container tag altijd per 2 tags gebruikt wordt. Ze omvat een stuk tekst of html en zorgt voor aanpassingen aan alles wat binnen de tags staat.

<b>TEKST</b>: tekst is vetgedrukt
<u>TEKST</u>: tekst is onderlijnd
<i>TEKST</i>: tekst is schuingedrukt
<p>TEKST</p>: voeg een alinea in*
<p align="center">TEKST</p>: hele alinea is gecentreerd
("center" kan ook vervangen worden door "left","right"of"justify"(uitvullen))
<font face="arial black">TEKST</font>: veranderd het lettertype.
<font size="2">: veranderd de grootte van de tekst
<a href="LINK"gt;TEKST</a>: voegt een hyperlink toe aan een stuk tekst.
<a href="#DOEL OP PAGE">WOORD</a>: Gaat naar het doel op je pagina. Voor deze heb je wel nog een doeltag nodig:
<a name="DOEL OP PAGE">DOEL</a> Als je dan op het WOORD klikt, komt je DOEL boven in het scherm te staan. Dit is handig voor als je een lange page hebt. Dan kan je in het begin links maken binnen je page. Ook kan je verschillende links maken voor een zelfde doel(bv. ga terug naar top)
opsomming:
<ul>
<li>PUNT1</li>
<li>PUNT2</li>
<li>PUNT3</li>
...<ul>
de tag '<ul>'(unordered list) kan vervangen worden door '<ol>'(ordered list); de bollen worden dan vervangen door cijfers

*Als je alinea invoegt, krijgt het stuk tekst tussen <p> en </p> de eigenschappen van een alinea. D.w.z een witregel voor en na de alinea. Met stylesheets kun je alinea's ook vooraf opmaken, maar dit doet nu niet terzake, je kan toch geen stylesheets gebruiken hier.

Als je container tags samen wil gebruiken, moet je goed op de volgorde letten:
<b><u>Werk je af met:</u></b>
Gewoon de omgekeerde volgorde dus!

Standalonetags:
Standalonetags worden vooral gebruikt om iets in te voegen:
<br>:voeg een witregel in (enter)
<hr>:voeg een horizontale lijn in, deze kan je ook aanpassen als je ze behandelt als tekst en tussen de opmaak-containertags zet.
<img>: voeg een afbeelding in, deze tag is niets zonder src, kijk hiervoor bij 'een afbeelding invoegen'
Het kan zijn dat overtollige spaties door de server automatisch gewist worden. Als je in dit geval toch meer dan één spatie na elkaar wil zetten gebruik je gwn &.nbsp; zonder puntje na & ervoor.

Een tabel invoegen
Als je al wat feeling hebt met de basistags, kan je dit al eens proberen:
<table border="KIES DIKTE TABELRAND, UITGEDRUKT IN PIXELS" width="KIES HET AANTAL PERCENT VAN DE BREEDTE VAN DE PAGINA DIE JE TABEL INNEEMT%" bordercolorlight="KIES KLEUR LINKS EN BOVEN" bordercolordark="KIES KLEUR RECHTS EN ONDER" bordercolor="KIES KLEUR VAN HEEL DE RAND">

<tr>
<td>rij1, kolom1</td>
<td>rij1, kolom2</td>
<td>rij1, kolom3</td>
</tr>
<tr>
<td>rij2, kolom1</td>
<td>rij2, kolom2</td>
<td>rij2, kolom3</td>
</tr>
<tr>
<td>rij3, kolom1</td>
<td>rij3, kolom2</td>
<td>rij3, kolom3</td>
</table>

Wordt:

rij1, kolom1	rij1, kolom2	rij1, kolom3
rij2, kolom1	rij2, kolom2	rij2, kolom3
rij3, kolom1	rij3, kolom2	rij3, kolom3

Een afbeelding invoegen
<img src="LINK">
Vul hier de direct link in vb.http://img258.imageshack.us/img258/7685/16958492ru.png
Ik weet het, met imageshack en putfile kan je het veel gemakkelijker,
maar als je het zo leert, kan je er echt coole dingen mee doen. Je kan er bijvoorbeeld een hyperlink van maken:<a href="HYPERLINK"><img src="LINK"></a>
Voorbeeldje voor Catfans:

Plaats afbeelding bepalen:
<img src="LINK" style="position: left: WAARDE; top: WAARDE">
WAARDE: vul hier het aantal pixies in te beginnen vanaf de linkerkant van je pagina en vanaf de top.
De plaats kiezen gaat het beste als je een leeg word-bestand opent de pic invoert, hier de plaats bepaalt zoals hij op je pagina zal komen, opslaat als een bestand met extensie.htm en dan opent. Normaal gezien zal je pc het bestand automatisch openen in internet explorer. Dan kies je beeld-->bron.
Kladblok wordt geopend. Ergens onderaan zal je iets zien van position.
Dan staat er left: WAARDE; top: WAARDE. Vul gewoon de waardes in en verbaas jezelf!!

Afbeelding achter je tekst plaatsen:
<img src="LINK" position: absolute; top: WAARDE; z-index:-1; left: WAARDE"> De positie t.o.v. je tekst wordt bepaalt door je z-index. Zo kan je ook de positie van 2 afbeeldingen bepalen door de achterste afbeelding de laagste z-index te geven. Kies wel een goed kleurtje zodat je tekst goed leesbaar blijft.
[edit]Ik heb wat geexperimenteerd en ik ben tot de jammerlijke vaststelling begrepen dat dit een verboden tag is.(ja die bestaan, is voor uw eigen veiligheid) edit]

Tot slot geef ik nog enkele veelgebruikte kleurtjes mee die je kan gebruiken op plaatsen waar een kleur kan ingevuld worden:
Hou er wel rekening mee dat deze kleuren soms moeilijk zichtbaar zullen zijn met andere sitelayouts! Probeer dus eerst eens op andere layouts hoe je memberpage er zou uitzien!

Blue	Cyan	Red	Fuchsia
Yellow	Lime	Black	Navy
Olive	Purple	Aqua	Gray
Green	Maroon	Silver	Teal

Bruin #663300
Oranje#FF9900

Dit wassie dan, voortaan kan je 'Ik weet wat HTML is' aanvinken
(de basis ken je toch al, en daar kan je al heel wat mee doen) Voor meer tags kan je altijd kijken op www.w3schools.com
P.S.Sommige tags die hier staan zullen niet werken wegens verbodenheid.
P.P.S.Moest je toch nog vragen hebben, pm me dan gwn ff. TEST TEST


<--- Zet smileys uit ---

Ga naar top

Terug naar het overzicht van member pages